<template>
    <div class="index-page">
        <div class="list-container">
            <u-list :list="list"></u-list>
        </div>
        <div class="introduction" v-if="recommendAuthorList.length > 0">
            <div class="title">推荐作者</div>
            <ul>
              <li v-for="(item, index) in recommendAuthorList" :key="item.id">
                <div class="img-area">
                  <img :src="item.avatar" alt="">
                </div>
                <div class="author-info">
                  <div class="author-name">{{ item.nick_name }}</div>
                  <div class="like-count">{{ item.like_count }}喜欢</div>
                </div>
                <div class="btn-area">
                  <div v-if="!item.isFocus" @click="doFocus(item.id, index)"><i class="iconfont icon-add"></i> 关注</div>
                  <div v-else class="has-focus" @click="cancelFocus(item.id, index)"><i class="iconfont icon-select"></i> 已关注</div>
                </div>
              </li>
            </ul>
            <!-- <div style="color: red; background: orange" @click="getInviteCode">点我生成邀请码</div> -->
        </div>
    </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import UList from '../../../components/u-list/u-list.vue'
const { mapActions } = createNamespacedHelpers('article')
export default {
  name: 'article-list',
  components: { UList },
  data: () => {
    return {
      list: [],
      recommendAuthorList: []
    }
  },
  methods: {
    ...mapActions({
      getCode: 'GET_INVITE_CODE',
      getArticleList: 'GET_ARTICLE_LIST'
    }),
    // async getInviteCode () {
    //   const res = await this.getCode()
    //   console.log(2222, res)
    // },
    async getList () {
      const res = await this.getArticleList({
        params: {},
        pageSize: 3,
        current: 1
      })
      if (res.status === 200) {
        this.list = res.result.list
      }
    },
    async getRecommendList () {
      const res = await this.$store.dispatch('GET_RECOMMEND_AUTHOR_LIST', {})
      if (res.status === 200) {
        this.recommendAuthorList = res.result.map(v => ({
          ...v, isFocus: false
        }))
      }
    },
    async doFocus (id, index) {
      const res = await this.$store.dispatch('DO_FOCUS', {
        id
      })
      if (res.status === 200) {
        this.$message.success('关注成功！')
        this.recommendAuthorList[index].isFocus = true
      }
    },
    async cancelFocus (id, index) {
      const res = await this.$store.dispatch('CANCEL_FOCUS', {
        id
      })
      if (res.status === 200) {
        this.$message.success('已取消关注！')
        this.recommendAuthorList[index].isFocus = false
      }
    }
  },
  mounted () {
    this.getList()
    this.getRecommendList()
  },
  created () {}
}
</script>
<style scoped>
    .list-container {
        width: 66.7%;
        float: left;
        margin-top: 10px;
    }
    .introduction {
        width: 30%;
        float: left;
        margin-left: 3.3%;
        font-size: 14px;
    }
    .title {
      color: #969696;
      margin-top: 40px;
    }
    li {
      position: relative;
      padding-left: 60px;
      height: 60px;
      margin-top: 15px;
    }
    li .img-area {
      position: absolute;
      top: 6px;
      left: 0;
      width: 48px;
      height: 48px;
    }
    li .img-area img {
      width: 48px;
      height: 48px;
      border-radius: 24px;
    }
    li .author-info {
      color: #333;
    }
    li .author-info .author-name {
      padding-top: 5px;
      line-height: 25px;
      padding-bottom: 2px;
    }
    li .author-info .like-count {
      font-size: 12px;
      color: #969696;
    }
    li .btn-area {
      position: absolute;
      top: 20px;
      right: 0;
      color: #42c02e;
      line-height: 20px;
      cursor: pointer;
    }
    li .btn-area .has-focus {
      color: #8c8c8c;
    }
</style>
